<template>
  <div class="layout">
    <header class="layout-header">
      <div v-show="backShow" class="layout-header__left" @click="goBack"><i class="cubeic-back"></i></div>
      <div class="layout-header__center"> {{ $route.name }} </div>
      <div class="layout-header__right"></div>
    </header>
    
    <div class="layout-main">
      <transition :enter-active-class="routerIn" :leave-active-class="routerOut">
        <router-view></router-view>
      </transition>
      <!-- <button @click="headShow = !headShow">test</button> -->
    </div>
  </div>
</template>

<script>
import 'animate.css'
export default {
  name: 'Index',
  props: {

  },
  data () {
    return {
      // backShow: false,
      routerIn: 'animated slideInRight',
      routerOut: 'animated slideOutLeft'
    }
  },
  computed: {
    backShow() {
      return this.$route.path !== '/home'
    }
  },
  watch: {
    // backShow(val) {
    //   console.log('change back', val)
    // }
    $route(val) {
      if (val.path === '/home') {
        this.$nextTick(() => {
          this.routerIn = 'animated slideInRight'
          this.routerOut = 'animated slideOutLeft'
        })
      } else {
        this.$nextTick(() => {
          this.routerIn = 'animated slideInLeft'
          this.routerOut = 'animated slideOutRight'
        })
      }
    }
  },
  created() {

  },
  mounted() {
    // console.log(this.$route)
  },
  // beforeRouteEnter(to, from, next) {
  //   console.log('to', to)
  //   console.log('from', from)
  //   next()
  // },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="stylus">
.layout
  display flex
  flex-flow: column
  height 100%
  &-header
    flex 0 0 auto
    display flex
    flex-flow: row nowrap
    align-items center
    height 2.4rem
    padding: 0 15px
    color: white
    background: $color-regular-blue
    &__left
      flex: 0 0 auto
    &__center
      flex: 1
      text-align center
      font-weight bold
    &__right
      flex: 0 0 auto  
  &-main
    position relative
    flex 1
    height: 100%
    transition: flex 0.5s
    // border-top 2px solid blue

</style> 




